<template>
	<view >
		<up-navbar
		  title="省赛咨询"
		  :autoBack="true"
		  bg-color="#00757f"
		  title-color="white" 
		  left-icon-color="white"
		       >
		       </up-navbar>
	</view>
	<view class="container">
		<view class="navbar">
		  <!-- 搜索框 -->
		  <input
		    class="search-input"
		    type="text"
		    placeholder="请输入活动名称关键字"
		    v-model="searchText"
		    @confirm="onSearch"
		  />
		  <!-- 搜索按钮 -->
		  <button class="search-button" @click="onSearch">搜索赛事</button>
		</view>
	  
	    <view class="qvbie">
	        <text>省赛</text>
	        <text @click="goToSCompetition">校赛</text>
	    </view>
	</view>
	       
	
	<view class="main">
	    <view class="main-content" id="#shengsai">
	        <view class="check1">
	            <view class="lqb" style="background-image: url('/static/图片/lqb.jpg'); background-size: cover; width: 160px; height: 150px;">
	            </view>
	            <text>蓝桥杯</text>
	            <view class="chakan">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>
	               
	        <view class="check2">
	            <view class="cxsjds" style="background-image: url('/static/图片/cxsj.jpg'); background-size: cover; width: 160px; height: 165px;">
	            </view>
	            <text>程序设计大赛</text>
	            <view class="chakan">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>   
	
	        <view class="check2">
	            <view class="jsjsjds" style="background-image: url('/static/图片/jsjsj.jpg'); background-size: cover; width: 160px; height: 150px;">
				</view>
	            <text>计算机设计大赛</text>
	            <view class="chakan">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	            </view>
	
	            <view class="check3">
	            <view class="tts"style="background-image: url('/static/图片/tts.jpg'); background-size: cover; width: 160px; height: 150px;">
	            </view>
	            <text>天梯赛</text>
	            <view class="chakan">
	                <button class="chakan-button" @click="onSearch">查看详情</button>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const searchText = ref('');

// 搜索按钮点击事件
const onSearch = () => {
  if (searchText.value.trim()) {
    uni.showToast({
      title: `搜索赛事: ${searchText.value}`,
      icon: 'none',
    });
    // 这里可以执行搜索逻辑
  } else {
    uni.showToast({
      title: '请输入活动名称关键字',
      icon: 'none',
    });
  }
  uni.navigateTo({
  	url:'/pages/shijian/index'
  })
};

const goToSCompetition = () => {
  uni.navigateTo({
    url: '/pages/xiaosai/index'
  });
};

const goback = () => {
	uni.switchTab({
		url:'/pages/home/index'
	})
}
</script>

<style lang="scss" scoped>
	.top{
		margin-top: 55px;
	}
	.top text{
		font-size: 20px;
		color: rgb(27, 132, 149);
	}
	.navbar {
	    width: 370px;
	    display: flex;
	    align-items: center;
	    padding: 10px;
	    background-color: whitesmoke;
	    border-bottom: 1px solid #ddd;
		margin-top: 64px;
	    }
	
	.search-input {
	    flex: 1;
	    height: 46px;
	    padding: 0 10px;
	    border: 1px solid #ddd;
	    border-radius: 5px;
	    margin-right: 10px;
	    }
	
	.search-button {
	    width: 110px;
	    height: 46px;
	    line-height: 46px;
	    text-align: center;
		font-size: 15px;
	    background-color: #00757f;
	    color: #fff;
	    border-radius: 5px;
	    border: none;
	    }

    .qvbie{
        position: relative;
        left: 90px;
		width: 500px;
        margin: 0 auto 0 auto;
        overflow: hidden;
        }

    .qvbie > text{
        display: inline-block;
        width: 100px;
        margin: 0;
        color: rgb(55, 154, 225);
        border-radius: 5px;
        padding: 0 10px 0 10px;
        text-align: center;
        font-size: 25px;
		text-decoration-color: rgb(102, 102, 192);
        }


    .chakan{
        position: relative;
        left: 100px;
        top: 50px;
        overflow: hidden;
        }
    .chakan-button{
        display: inline-block;
        width: 88px;
        height: 47px;
        line-height: 25px;
        text-align: center;
        border-radius: 5px;
        font-size: 15px;
        padding: 10px;
		margin-right: 5px;
        color: white;
		background-color: #4d889c;
        }

    .check1{
        width: 800px;
        margin: 0 15px;
        border-top: gray solid 1px;
        border-bottom: gray solid 1px;
        overflow: hidden;
        }
    .check2{
        width: 800px;
        margin: 0 15px;
        border-bottom: gray solid 1px;
        overflow: hidden;
        }
	.check3{
	    width: 800px;
	    margin: 0 15px;
	    overflow: hidden;
	    }
		
    .check1 text{
        position: relative;
        left: 20px;
        top: 30px;
        font-size: 20px;
        }
    .check2 text{
        position: relative;
        left: 20px;
        top: 30px;
        font-size: 20px;
        }
	.check3 text{
	    position: relative;
	    left: 20px;
	    top: 30px;
	    font-size: 20px;
	    }
        
    .lqb,.lqb text{
        float: left;
        }
    .cxsjds,.cxsjds text{
        float: left;
        }
    .jsjsjds,.jsjsjds text{
        float: left;
        }
    .tts,.tts text{
        float: left;
        }
</style>
